<!DOCTYPE html>

<!--
  Google HTML5 slide template

  Authors: Luke Mahé (code)
           Marcin Wichary (code and design)
           
           Dominic Mazzoni (browser compatibility)
           Charles Chen (ChromeVox support)

  URL: http://code.google.com/p/html5slides/
-->

<html>
  <head>
    <title>Presentation</title>

    <meta charset='utf-8'>
    <script
      src='http://html5slides.googlecode.com/svn/trunk/slides.js'></script>
  </head>
  
  <style>
    /* Your individual styles here, or just use inline styles if that’s
       what you want. */
    table .smaller {
      font-size: 50%;
    }
    
  </style>

  <body style='display: none'>

    <section class='slides layout-regular template-default'>
      
      <!-- Your slides (<article>s) go here. Delete or comment out the
           slides below. -->
        
        
      
      <article class='biglogo'>
      </article>

      <article>
        <h1>
          Android Camp:
          <br>
          Lesson 3: Activities and Applications
        </h1>
        <p>
          Trevor Johns
          <br>
          June 7, 2011
        </p>
      </article>
      
      <article class='fill'>
        <h3>
          Welcome.
        </h3>
        <p>
          <img src="camping.jpeg">
        </p>
        <div class='source white'>
          Source: <a href="http://www.flickr.com/photos/heatheronhertravels/2734424837/">Heather Cowper (heatheronhertravels) @ Flickr</a>
        </div>
      </article>
            
      <article>
        <h3>
          Introductions
        </h3>
        
        <p>
          <img src="https://googlewho.appspot.com/trevorjohns/photo/539257101/big/60c691623464ff67a8963223a875d6ec" style="float: left; padding-right: 2em;">
          Trevor Johns<br/>
          Developer Programs Engineer<br/>
          Android Developer Relations<br/>
          <a href="mailto:trevorjohns@google.com">trevorjohns@google.com</a>
        </p>
      </article>
      
      <article>
        <h3>Follow Along At Home!</h3>
        <p>Slides &amp; source code available at:</p>
        <p><a href="http://code.google.com/p/main-gac2011/">http://code.google.com/p/main-gac2011/</a></p>
      </article>
      
      <article class='smaller'>
        <h3>
          Topics
        </h3>
        
        <ul>
          <li>Android applications</li>
          <li>User interface design</li>
          <li>Activity lifecycle</li>
          <li>Storing application state</li>
        </ul>
      </article>

      <article>
        <h3>
          Welcome To Your Android App!
        </h3>
        
        <table class="build" border="0">
          <tr>
            <td>Activities<br/><br/><br/><br/></td>
            <td>Background Services<br/><br/><br/><br/></td>
          </tr>
          <tr>
            <td>Content Providers</td>
            <td>Broadcast receivers</td>
          </tr>
        </table>
      </article>
      
      <article>
        <h3>The Activity</h3>
        <q>An activity provides a user interface for a single screen in your application</q>
      </article>
      
      <article>
        <h3>The Activity</h3>
        <p>Parts of an activity</p>
        
        <ul class="build">
          <li>AndroidManifest.xml <code>&lt;activity&gt;</code> statement</li>
          <li>XML files containing your UI</li>
          <li>Resource files containing strings, graphics, and other miscellaneous data</li>
          <li><code>.java</code> source files</li>
        </ul>
      </article>

      <article>
        <h3>
          Introducing ElephantText
        </h3>

        <p>ElepantText is our sample app for this lesson.</p>
        
        <p>Allows (forgetful) users to save a single snippet of text, and recall it later.</p>
      </article>
      
      <article>
        <h3>
          Activity 1: Creating an activity
        </h3>
        
        <p><strong>Task:</strong> Using the provided sample code, create an application containing a single activity and it's UI.</p>
        
        <p>The user interface should include a text field (<code>EditText</code>), a clear button (<code>Button</code>), and text instructions (<code>TextView</code>).</code>
      </article>
      
      <article>
        <h3>
          Declaring an Activity
        </h3>
        <pre>&lt;application android:label=&quot;AndroidCampL3&quot; android:icon=&quot;@drawable/icon&quot;&gt;
    &lt;activity android:name=&quot;.ElephantTextActivity&quot;
              android:label=&quot;@string/app_name&quot;&gt;
        &lt;intent-filter&gt;
            &lt;action android:name=&quot;android.intent.action.MAIN&quot; /&gt;
            &lt;category android:name=&quot;android.intent.category.LAUNCHER&quot; /&gt;
        &lt;/intent-filter&gt;
    &lt;/activity&gt;
&lt;/application&gt;
&lt;uses-sdk android:targetSdkVersion=&quot;11&quot; /&gt;</pre>
      </article>
      
      <article>
        <h3>
          Defining a layout
        </h3>
        <pre>&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
&lt;RelativeLayout xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;
    android:orientation=&quot;vertical&quot;
    android:layout_width=&quot;fill_parent&quot;
    android:layout_height=&quot;fill_parent&quot;
    &gt;
&lt;TextView
    android:id=&quot;@+id/top_text&quot;
    android:layout_width=&quot;fill_parent&quot;
    android:layout_height=&quot;wrap_content&quot;
    android:text=&quot;@string/top_text&quot; /&gt;
&lt;EditText
    android:id=&quot;@+id/text_input&quot;
    android:layout_width=&quot;fill_parent&quot;
    android:layout_height=&quot;300px&quot;
    android:text=&quot;@string/default_text&quot;
    android:layout_below=&quot;@id/top_text&quot;
    /&gt;
&lt;/RelativeLayout&gt;</pre>
      </article>
      
      <article>
        <h3>
          Inflating a view from XML
        </h3>
        <pre>/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState)
{
    // Inflate layout from XML. This is a standard incantation that you'll find
    // at the start of practically every Android activity.
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
}</pre>
      </article>
      
      <article>
        <h3>
          Activity 2: Adding a button &amp; wiring up controls
        </h3>
        
        <p><strong>Task:</strong> Add a <code>Button</code> to clear the text field.</p>
      
        <p>Write code to clear the text field when the button is pressed.</p>
      </article>
            
      <article>
        <h3>
          Creating a button
        </h3>
        <pre>&lt;Button
android:id=&quot;@+id/clear_button&quot;
android:layout_width=&quot;wrap_content&quot;
android:layout_height=&quot;wrap_content&quot;
android:text=&quot;Clear&quot;
android:layout_below=&quot;@id/text_input&quot;
android:layout_toRightOf=&quot;@id/bottom_text&quot;
android:onClick=&quot;onClick&quot; /&gt;
      </article>
      
      <article>
        <h3>
          Creating an onClick handler
        </h3>
        <pre>/** Handler to receive onClick events from buttons.
 *
 * This is defined on a per-button basis inside of layout/main.xml by setting
 * android:onClick="onClick".
 */
public void onClick(View v) {
    switch (v.getId()) {
        case R.id.clear_button:
            mTextInput.setText("");
    }
}</pre>
        </article>
        
        <article>
          <h3>
            Activity lifecycle
          </h3>
          <img class="centered" src="activity_lifecycle.png" height="625" alt="Activity Lifecycle" />
        </article>
        
        <article>
          <h3>
            Saving temporary state while an application is running
          <h3>
          <img class="centered" src="restore_instance.png" width="612" height="400" alt="Restore Instance" />
        </article>
        
        <article>
          <h3>
            Saving temporary state while an application terminates
          </h3>
          <img class="centered" src="activity_lifecycle.png" height="625" alt="Activity Lifecycle" />
        </article>
        
        <article>
          <h3>
            Activity 3: Saving state
          </h3>

          <p><strong>Task:</strong> Have the application automatically save the text field to disk.</p>

          <p>Use <code>SharedPreferences</code> as the storage mechanism.</p>
        </article>
        
        <article>
          <h3>
            Using <code>onPause()</code> to save permanent state
          </h3>
          <pre>/** Save persistent data associated with this application for future runs.
 *
 * Note: Per-instance state for each UI element is automatically saved by
 * the default implementation of onSaveInstanceState(Bundle), and automatically
 * restored by onRestoreInstanceState(Bundle). However, this data is discarded
 * when the activity terminates, so we need to store it to disk.
 */
@Override
public void onPause()
{
    super.onPause();
    SharedPreferences data = getSharedPreferences(
        getClass().getName(), MODE_PRIVATE);
    SharedPreferences.Editor editor = data.edit();
    editor.putString("saved_text", mTextInput.getText().toString());
    editor.commit();
}</pre>
        </article>
      
      <article>
        <h3>
          Bonus activity
        </h3>
        <ul class="build">
          <li>Add a <code>Button</code> that allows sharing your snippet over Twitter
            <ul><em>Hint: read the documentation on launching an activity using an <code>Intent</code>. Set the action to <code>ACTION_SEND</code>.</em></p>
          </li>
      </article>
      
      <article>
        <h3>
          Thank you, and happy coding!
        </h3>
        <p><strong>Questions? Need Help?</strong></p>
        <p><a href="trevorjohns@google.com">trevorjohns@google.com</a><br/></p>
      </article>

    </section>

  </body>
</html>
